<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ESX-Tetris</title>
    <link rel="stylesheet" href="../css/grid.css">
</head>

<body>
    <div class="main">
        <!--屏幕-->
        <section class="screen">
            <!--网格-->
            <div id="grid"></div>
            <!--通知栏-->
            <div id="notice"></div>
        </section>
        <!--操控板-->
        <section class="controlboard">
            <!--游戏手柄-->
            <div id="gamepad"></div>
        </section>
        <!--边框设置区-->
        <aside class="setting" id="sidebar"></aside>
    </div>
    <script type="text/javascript">
        window.onload = function () {
            let rowCount = 20, colCount = 10;
            let gridHtml = [];
            for (let i = 0; i < rowCount; i++) {
                gridHtml.push("<div class='row'>");
                for (let j = 0; j < colCount; j++) {
                    gridHtml.push(`
                        <div class="col">
                            <div class="cell"> 
                                <div></div>
                            </div>
                        </div>
                    `);
                }
                gridHtml.push("</div>");
            }
            document.getElementById("grid").innerHTML = gridHtml.join("");
        };
    </script>
</body>

</html>